<template>
  <div class="index">
    <header class="index_header">
          <img :src="homeBannerSrc" class="index_header_banner">
    </header>
    <section class="index_nav">
        <Card>
              <section class="index_nav_list">
                <section class="index_nav_list_item" v-for="(item,index) in navList" :key="index">
                    <img :src="item.src" class="index_nav_list_item_img"/>
                    <span class="index_nav_list_item_title" >{{ item.title }}</span>
                </section>
              </section>
        </Card>
    </section>

    <section class="index_post">
      <Card>
          <section class="index_post_header">
            <span class="index_post_header_title">热门学习资源</span>
            <router-link to="" class="index_post_header_more">查看更多</router-link>
          </section>
          <section class="index_post_list">
              <section class="index_post_list_item">
                <img :src="homeBannerSrc" class="index_post_list_item_img">
                <section class="index_post_list_item_info">
                  <p class="index_post_list_item_info_title">学习资源</p>
                    <span class="index_post_list_item_info_user">张三</span>
                    <span class="index_post_list_item_info_like">&nbsp;&nbsp;<van-icon name="like-o" />&nbsp;99</span>
                </section>
              </section>
              <section class="index_post_list_item">
                <img :src="homeBannerSrc" class="index_post_list_item_img">
                <section class="index_post_list_item_info">
                  <p class="index_post_list_item_info_title">学习资源2</p>
                    <span class="index_post_list_item_info_user">李四</span>
                    <span class="index_post_list_item_info_like">&nbsp;&nbsp;<van-icon name="like-o" />&nbsp;260</span>
                </section>
              </section>
          </section>
      </Card>
    </section>

    <section class="index_today">
        <Card>
            <section class="index_today_title">今日学习计划</section>
            <section class="index_today_list" v-if="planList.length > 0">
              <section class="index_today_list_item">
                    <section>
                      <van-tag type="success">已完成</van-tag>
                      <span class="index_today_list_item_title">&nbsp;&nbsp;完成英语口语练习</span>
                    </section>
                  <span class="index_today_list_item_time">09:00~12:00</span>
              </section>
              <section class="index_today_list_item">
                    <section>
                      <van-tag type="warning">未完成</van-tag>
                      <span class="index_today_list_item_title">&nbsp;&nbsp;完成C++课后作业</span>
                    </section>
                  <span class="index_today_list_item_time">14:00~16:00</span>
              </section>
              <section class="index_today_list_item">
                    <section>
                      <van-tag type="warning">未完成</van-tag>
                      <span class="index_today_list_item_title">&nbsp;&nbsp;完成高数作业</span>
                    </section>
                  <span class="index_today_list_item_time">18:00~19:30</span>
              </section>
            </section>
            <van-empty  v-else :image-size="42" description="暂无今日计划"  />
        </Card>
    </section>
  </div>
</template>

<script setup>
import {ref,onMounted} from 'vue';
import { useRouter } from 'vue-router';
import {getPlanList} from '@/apis/plan';
import dayjs from 'dayjs';
import homeBannerSrc from '@/assets/home-banner.png';
import icon1Src from '@/assets/home-icon1.png';
import icon2Src from '@/assets/home-icon2.png';
import icon3Src from '@/assets/home-icon3.png';
import icon4Src from '@/assets/home-icon4.png';
import Card from '@/components/Card/index.vue';



const navList = [
  {
    title:"语言交流",
    src:icon1Src,
  },
  {
    title:"资源共享",
    src:icon2Src,
  },
  {
    title:"学习计划",
    src:icon3Src,
  },
  {
    title:"好友匹配",
    src:icon4Src,
  },
];

const planList = ref([]);

const init = async () => {
  try {
      const res = await getPlanList({currentTime:dayjs().format('YYYY-MM-DD')});
      if(res?.code === 200){
        planList.value = res?.data?.list?.splice(0,3);
        console.log(planList.value,'planList');

      }

  } catch (error) {
    console.log(error, 'init-error');

  }
};
onMounted(() => {
  init();
});
</script>

<style lang="less" scoped>
.index{
  box-sizing: border-box;
  padding-top: 8px;
  &_header{
    height: 140px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    &_banner{
      width: 90%;
      height: 100%;
      border-radius:6px;

    }
  }
  &_nav{
    width: 90%;
    height: 100px;
    margin: 0 auto;
    margin-top: 8px;
    background-color: #fff;
    &_list{
      display: flex;
      justify-content: space-evenly;
      &_item{
        flex:1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100px;
        &_img{
          width: 56px;
          height: 56px;
        }
        &_title{
          font-size: 14px;
          color: #666;
        }

      }
    }
  }
  &_post{
    width: 90%;
    height: 180px;
    margin:  0 auto;
    &_header{
      height: 40px;
      box-sizing: border-box;
      padding:  0 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &_title{
        font-size: 14px;
        color: #333;
      }
      &_more{
        font-size: 12px;
      }
    }
    &_list{
      height: 140px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      &_item{
        width: 140px;
        height: 100%;
        &_img{
          width: 140px;
          height: 90px;
          border-radius: 4px;
        }
        &_info{
            height: 46px;
            &_title{
              font-size: 14px;
              color: #000;
            }

            &_user{
              font-size: 12px;
              color: #666;
            }
            &_like{
              font-size: 12px;
              color: #666;
            }
        }
      }
    }
  }
  &_today{
    width: 90%;
    margin: 0 auto;
    height: 150px;
    &_title{
      font-size: 14px;
      color: #000;
      height: 32px;
      line-height: 32px;
      box-sizing: border-box;
      padding: 0 8px;
    }
    &_list{
      &_item{
        height: 36px;
        box-sizing: border-box;
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &_title{
          font-size: 14px;
          color: #333;
        }
        &_time{
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}
</style>
